<template>
  <div p-16rpx v-if="logisticsList && logisticsList.length">
    <div mb-20rpx card v-for="(packageItem, packageIndex) in logisticsList" :key="packageIndex">
      <div class="order-cell">
        <div class="order-cell_label">物流公司：</div>
        <div class="order-cell_value">{{ packageItem.logisticsName }}</div>
      </div>
      <div class="order-cell">
        <div class="order-cell_label">快递单号：</div>
        <div class="order-cell_value">{{ packageItem.logisticsNo }}
          <copy :content="packageItem.logisticsNo" />
        </div>
      </div>
      <div p-32rpx v-for="(item, index) in packageItem.orderPackageItemList" :key="index">
        <order :res="item">
          <template #body>
            <div text-24rpx color-warmGray>
              发货数量<span ml-10rpx>{{ item.deliverNumber }}</span>
            </div>
          </template>
        </order>
      </div>
      <!-- 物流信息 -->
      <div v-if="packageItem.traces && packageItem.traces.traces" p-16rpx>
        <div v-for="(trace, i) in packageItem.traces.traces" :key="i" mb-30rpx>
          <div text-26rpx :style="{ color: i === 0 ? '#000' : '#999' }">
            {{ trace.AcceptStation }}
          </div>
          <div mt-4rpx color-warmGray text-24rpx>
            {{ trace.AcceptTime }}
          </div>
        </div>
      </div>
      <div v-else py-100rpx>
          <empty text="暂无物流信息"  />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getPackage } from '@/api/order';
import order from '@/components/basic-template/order.vue';
import copy from '@/components/copy/index.vue';
import { onLoad } from '@dcloudio/uni-app';
import empty from '@/components/empty/index.vue';
const logisticsList = ref<any>([])

async function init(sn: string) {
  const res = await getPackage(sn)
  if (res.data.success) {
    logisticsList.value = res.data.result;
  }
}

onLoad((options: any) => {
  init(options.sn)
})
</script>

<style scoped lang="scss">
.order-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx;

  font-size: 24rpx;

  &_label {
    color: #999;
    font-size: 24rpx;
    min-width: 150rpx;
  }

  &_value {
    text-align: right;

  }
}
</style>
